<template>
    <div class="product-category-container">
        <el-button type="primary" @click="addCategory">添加商品分类</el-button>
        <div class="space-bar-10"></div>
        <el-alert type="warning" title="平台商品的分类应添加至三级，否则商户添加商品时无分类可选" />
        <el-divider class="divider" />

        <el-table :data="categoryList.arr" row-key="id">
            <el-table-column label="分类名称" prop="name" />
            <el-table-column label="分类图标" prop="icon" />
            <el-table-column label="排序" prop="sortNum" />
            <el-table-column label="是否显示" prop="visible" />
            <el-table-column label="是否推荐" prop="recommend" />
            <el-table-column label="创建时间" prop="createTime" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button link type="primary" @click="editCategoryHandler(scope.row)"
                        >编辑</el-button
                    >
                    <el-button link type="primary" @click="deleteCategoryHandler(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import productCategoryApi from '@/api/productCategory'
import type { ProductCategoryList } from '@/types/product'
import { messageBox, message } from '@/utils/common'

let categoryList: {
    arr: Array<ProductCategoryList>
} = reactive({
    arr: []
})

const addCategory = async () => {
    console.log(categoryList)
}

const editCategoryHandler = (row: ProductCategoryList) => {
    console.table(row)
    console.table(row.id)
}

const deleteCategoryHandler = (row: ProductCategoryList) => {
    messageBox('是否删除该商品分类?')
        .then(async () => {
            const res = await productCategoryApi.delete(row.id)
            if (res.data.success) {
                message('删除成功')
            }
        })
        .catch(() => {
            message('取消删除', 'info')
        })
}

onMounted(async () => {
    const res = await productCategoryApi.list()
    categoryList.arr = res.data.body
})
</script>

<style scoped lang="scss">
.product-category-container {
    .divider {
        margin: 15px 0;
    }
}
</style>
